<template lang="html">
  <div class="publicBox">
    <div class="publicBoxContent allOrder">
      <div class="allOrderSerach">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="formInline.order_no" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="formInline.goods_name" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="请输入内容" v-model="content" class="input-with-select">
              <el-select v-model="type" slot="prepend" placeholder="请选择">
                <el-option label="用户名" value="1"></el-option>
                <el-option label="手机号" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>

          <el-form-item label="订单时间">
            <el-date-picker v-model="time" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :default-value=" year + '-' + month"
                            :picker-options="expireTimeOption"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="allOrderBox">
        <el-radio-group v-model="dataType" @change="onSubmit" style="margin-bottom: 30px;">
          <el-radio-button label="-1">全部</el-radio-button>
          <el-radio-button label="0">待审核</el-radio-button>
          <el-radio-button label="1">待商品寄回</el-radio-button>
          <el-radio-button label="4">寄回待审核</el-radio-button>
          <el-radio-button label="6">已完成</el-radio-button>
          <el-radio-button label="2">已拒绝</el-radio-button>
          <el-radio-button label="3">已取消</el-radio-button>
        </el-radio-group>
        <div class="allOrderBoxTable">
          <div class="allOrderTitle">
            <div class="titleLeft">
              <table>
                <tr>
                  <td style="width: 80% !important">商品</td>
                  <td>贸易类型</td>
                </tr>
              </table>
            </div>
            <div class="titleRight">
              <table>
                <tr>
                  <td>下单用户</td>
                  <td>手机号码</td>
                  <td>订单金额</td>
                  <td>订单状态</td>
                  <td>操作</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="userOrder" v-for="(item,index) in orders" :key="index">
            <div class="userOrderTop">
              <span>订单编号：</span><span class="orderNo">{{item.order_goods.child.child_no}}</span>
              <span style="margin-left: 30px">下单时间：</span><span>{{item.order_goods.create_at}}</span>
              <span class="statusBtn"
                    @click="toUrl(`/index/order/serviceDetails?orderId=${item.order_refund_id}`)">订单详情</span>
            </div>
            <div class="orderDisplay">
              <div class="displayLeft">
                <table>
                  <tr>
                    <td class="diplayImg clearfix">
                      <div class="bianh">
                        <div class="dImg">
                          <img :src="item && $getImg(item.order_goods.image)" alt="">
                        </div>
                        <div class="dCon">
                          <div class="name"> {{item.order_goods.goods_name}}</div>
                          <div class="sum" v-for="(ite,inde) in item.order_goods.attr">{{ite[0]}}：{{ite[1]}}<span v-show="ite[0]=='数量'">（{{item.order_goods.unit}}）</span></div>

<!--                          <div class="sum">规格：{{item.order_goods.goods_attr}}</div>-->
                        </div>
                      </div>
                    </td>
                    <td>{{item.order_goods.trade_type_name}}</td>
                  </tr>
                </table>
              </div>
              <div class="displayRight">
                <table>
                  <tr :style="{ height:(trH + 3)*1 +'px' }">
                    <td>{{item.contact}}</td>
                    <td>{{item.phone}}</td>
                    <td class="money">
                      {{item.order_goods.total_pay_price}}
                      <p>(运费：{{item.order_goods.express_price}})</p>
                    </td>
                    <td> {{item &&  (item.status.value==4 ? "已发货待审核":item.status.text)}}</td>
                    <td >
                      <span class="statusBtn cancal" v-if="[0].indexOf(item && item.status.value) != -1" @click="cancel(item.order_refund_id)">取消售后</span>
                      <span class="statusBtn cancal" v-if="(item && item.type.value == 1) && (item.status.value==1)" @click="$router.push({path: `/index/order/applyDetails?orderId=${item.order_refund_id}`})">发货</span>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="noDingdan" v-if="total<=0">
        <img src="../../assets/img/pc_wudingan.png" alt="暂无"/>
      </div>
      <div class="allOrderPage">
        <el-pagination background @current-change="handleCurrentChange" :page-size="pageSize"
                       layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "serviceOrder",
        data() {
            return {
                expireTimeOption: {
                    disabledDate(date) {
                        //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                        return date.getTime() > Date.now();
                    }
                },
                dataType: "-1",
                trH: 90,
                formInline: {
                    order_no: "",
                    start_time: "",
                    end_time: "",
                    name: "",
                    phone: "",
                    goods_name: "",
                    type_name: "",
                    state: -1,

                },
                hideArr: [],
                page: 1,
                pageSize: 15,
                total: 0,
                orders: [],
                type: "",
                time: "",
                content: "",
                year: 0,
                month: 1,
            };
        },
        created() {
            this.month = new Date().getMonth();
            this.year = new Date().getFullYear();
            if (this.month == 0) {
                this.year = this.year - 1;
                this.month = 12;
            }
            this.getList();
        },
        watch: {},
        methods: {
            cancel(id){
                this.$HttpGet("/index.php?s=/admin/home.refund/cannel", {
                    order_refund_id: id
                }).then(res => {
                    switch (res.code) {
                        case '0':this.$notifySuccess('取消成功');break;
                    }
                    this.getList();
                })
            },
            onSubmit() {
                if (this.time && this.time.length > 0) {
                    this.formInline.start_time = this.time[0];
                    this.formInline.end_time = this.time[1];
                } else {
                    this.formInline.start_time = "";
                    this.formInline.end_time = "";
                }
                this.formInline.name = "";
                this.formInline.phone = "";
                if (this.content) {
                    if (this.type == "1") {
                        this.formInline.name = this.content;
                    } else if (this.type == "2") {
                        this.formInline.phone = this.content;
                    }
                }

                switch (this.dataType) {

                    case "-1":
                        this.formInline.state = -1;
                        this.formInline.type_name = "全部";
                        break;
                    case "0":
                        this.formInline.state = 0;
                        this.formInline.type_name = "待审核";
                        break;
                    case "1":
                        this.formInline.state = 1;
                        this.formInline.type_name = "待商品寄回";
                        break;
                    case "4":
                        this.formInline.state = 4;
                        this.formInline.type_name = "寄回待审核";
                        break;
                    case "6":
                        this.formInline.state = 6;
                        this.formInline.type_name = "已完成";
                        break;
                    case "2":
                        this.formInline.state = 2;
                        this.formInline.type_name = "已拒绝";
                        break;
                    case "3":
                        this.formInline.state = 3;
                        this.formInline.type_name = "已取消";
                        break;
                }

                this.page = 1;
                this.getList();
            },
            getList() {
                this.$HttpGet("/index.php?s=/admin/home.refund/lists", {
                    page: this.page,
                    pageSize: this.pageSize,
                    ...this.formInline
                }).then(res => {
                    this.orders = res.data.data;

                    for(let i=0;i< this.orders.length;i++){

                            var arr =  this.orders[i].order_goods.goods_attr.split("|");
                            var endArr = arr.map((item,index)=>{
                                return item.split("_")
                            });
                            endArr.pop();
                            this.orders[i].order_goods.attr=endArr;


                    }
                    this.total = res.data.total;

                })
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
            toUrl(url) {
                this.$router.push({path: url});
            }
        },

    };
</script>

<style lang="scss" scoped>
  .allOrder {
    min-width: 850px;

    .allOrderSerach {
      /deep/ .input-with-select .el-input-group__prepend {
        background-color: #fff;
        color: #606266;

        .el-select .el-input {
          width: 130px;
        }
      }
    }

    .allOrderBox {
      margin-top: 20px;
      /*min-width: 1620px;*/
      .allOrderBoxTable {
        .allOrderTitle {
          display: flex;
          justify-content: space-between;

          .titleLeft, .titleRight {
            width: 50%;

            table {
              width: 100%;

              tr {
                td {
                  padding-left: 10px;
                }
              }
            }
          }

          .titleLeft {
            table {

            }

          }

          .titleRight {
            table {
              tr {
                td {
                  width: 20%;
                  padding-left: 10px;
                }
              }
            }
          }
        }

        .userOrder {
          margin-top: 20px;

          .userOrderTop {
            height: 38px;
            background: rgba(#3A61CA, 0.1);
            border: 1px solid #EEEEEE;
            font-size: 12px;
            font-weight: 500;
            color: rgba(#000000, 0.6);
            line-height: 38px;
            text-align: left;
            padding-left: 10px;
            .statusBtn {
              color: #409EFF;
              cursor: pointer;
              margin-left: 15px;
            }
            .orderNo {
              color: #000000;
            }
          }

          .orderDisplay {
            display: flex;

            .displayLeft {
              width: 50%;
              border-bottom: 1px solid #EEEEEE;
              border-left: 1px solid #EEEEEE;

              table {
                width: 100%;

                tr {
                  height: 90px;

                  .diplayImg {
                    width: 80%;
                    height: 90px;

                    .bianh {
                      display: flex;

                      .dImg {
                        width: 80px;
                        height: 90px;
                        border-right: 1px solid #EEEEEE;

                        img {
                          width: 58px;
                          height: 58px;
                          margin: 11px;
                          margin-top: 16px;
                        }
                      }

                      .dCon {
                        margin-left: 20px;
                        font-size: 12px;

                        .name {
                          margin-top: 10px;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          -webkit-line-clamp: 2;
                          overflow: hidden;
                          line-height: 18px;
                        }

                        .sum {
                          color: rgba(#000000, .6);
                          margin-top: 5px;
                        }
                      }
                    }
                  }

                  td {
                    border-right: 1px solid #EEEEEE;
                    border-top: 1px solid #EEEEEE;
                    padding-left: 10px;
                  }
                }
              }
            }

            .displayRight {
              width: 50%;
              border-top: 1px solid #EEEEEE;
              border-bottom: 1px solid #EEEEEE;

              table {
                width: 100%;
                height: 100%;

                tr {
                  .money {
                    color: #ea3030;
                    p{
                      font-size: 12px;
                    }
                  }
                  .statusBtn {

                    display: block;
                    margin-bottom: 5px;
                    color: #409EFF;
                    cursor: pointer;
                    width: 64px;
                    height: 24px;
                    text-align: center;
                    line-height: 24px;
                    border-radius: 6px;
                  }
                  .cancal{
                    background: #FFFFFF;
                    border: 1px solid #EEEEEE;
                    color: #333333;
                  }
                  .cancal:hover{
                    background: #EEEEEE;
                    border: 1px solid #D2D2D2;
                  }

                  td {
                    width: 20%;
                    border-right: 1px solid #EEEEEE;
                    padding-left: 10px;

                  }
                }
              }
            }

          }
        }
      }

    }
    .noDingdan{
      display: flex;
      justify-content: center;
      margin-top: 90px;
    }
    .allOrderPage {
      margin-top: 20px;
      text-align: right;
      margin-bottom: 50px;
    }
  }

</style>
